

<template>
  <router-view/>
  <div class="top">
    <div class="box">
    <div class="box_top">
      <img src="../assets/imgs/logo.png" height="70" width="350"/>
    </div>
    <div class="box_bottom">
      <el-form ref="formAddRef" :model="formAdd"  label-width="120px" >

        <el-form-item prop="username" >
          <el-input v-model="formAdd.username"
                    placeholder="用户名"
                    :prefix-icon="User"
                    style="width: 280px;
                    height: 50px;
                    font-size: 18px;
                    letter-spacing: 15px;
                    border-radius: 20px;
                    font-weight: bold; "></el-input>
        </el-form-item>
        <el-form-item prop="password"  >
          <el-input v-model="formAdd.password"
                    placeholder="密码"
                    :prefix-icon="Lock"
                    style="width: 280px;
                    height: 50px;
                    font-size: 18px;
                    letter-spacing: 15px;
                    border-radius: 20px;
                    font-weight: bold; margin-top: 10px"
                    show-password></el-input>
        </el-form-item>
        <el-form-item prop="email" >
          <el-input v-model="formAdd.email"
                    placeholder="邮箱"
                    :prefix-icon="Message"
                    style="width:280px;
                    height: 50px;
                    font-size: 18px;
                    letter-spacing: 15px;
                    border-radius: 20px;
                    font-weight: bold; margin-top: 10px"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="onSubmitHandler"
                     style="width: 300px;
                    height: 50px;
                    font-size: 20px;
                    letter-spacing: 15px;
                    border-radius: 20px;
                    font-weight: bold; margin-right: 25%;margin-top: 10px" >注册</el-button>
          <el-button type="info" @click="onResetHandler"
                     style="width: 300px;
                    height: 50px;
                    font-size: 20px;
                    letter-spacing: 15px;
                    border-radius: 20px;
                    font-weight: bold; margin-top: 10px;margin-left: 0px;margin-right: 25%">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    </div>
  </div>


</template>
<script setup>
import {reactive, ref} from "vue";
import { useRouter } from "vue-router";
const router = useRouter() ;
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import {Lock, User} from "@element-plus/icons";
import {Message} from "@element-plus/icons-vue";


// 新增表单引用
const formAddRef = ref()
// 新增表单初始化数据
const formAddData = {
  username : '' ,
  email : '' ,
  password : ''
}
// 新增表单绑定数据模型
const formAdd = reactive({...formAddData})   // ...formAddData 解构formAddData

const onSubmitHandler = () => {
  // 提交表单数据以注册新用户
  request({
    method: 'POST',
    url: '/sys/user/register',
    params: formAdd
  }).then(response => {

    // 注册成功后，获取新用户信息
    request({
      method: 'GET',
      url: '/sys/user/getnewone',
      params: formAdd
    }).then(response => {
      // 将新用户信息存储在会话存储中
      sessionStorage.setItem('username', JSON.stringify(response.data.data));

      // 从SessionStorage取出数据
      let userstr = sessionStorage.getItem('username')
      const formEmailData = {
        id :  JSON.parse(userstr).id,
        to :  JSON.parse(userstr).email
      }
      const formSendEmail = reactive({...formEmailData})
      request({
        method: 'POST',
        url:'/email/sendActiveEmail',
        params:formSendEmail,
      }).then(response => {
        // 处理注册成功的情况
        ElMessage({
          type: 'success',
          message: '注册,激活邮件已发送，请激活账号！'
        })
        router.push('/')
      })

    }).catch(error => {
      console.error('获取新用户信息失败:', error);
    });
  }).catch(error => {
    console.error('注册用户失败:', error);
  });

}





const onResetHandler = () => {
  // 清空表单数据
  formAddRef.value.resetFields()
  router.push("/")

}
</script>
<style scoped>
.top{
  width: 100%;
  height: 100%;
  background-image: url("../assets/imgs/background2.jpg");
  background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
  position: absolute; /* 不可缺少 */
  z-index: -1;
  background-repeat: no-repeat;
}
.box{
  margin-top: 100px;
  margin-left: 35%;
  width: 500px;
  height: 550px;
  border-radius: 20px;
  color: black;
  background: rgba(222,222,221,0.85);
}
.box_top{
  padding-top: 40px;
}
.box_bottom{
  padding-top: 40px;
}

</style>